
import Header from "./../../components/Header";
import {Row, Col} from "./../../rsuite";
import {Link} from "react-router";
import {connect} from "react-redux";
import NoData from "./../../components/nodata";
import Search from "./../../components/search";
import Panel from "./../../elements/Panel";
import Pagination from "./../../components/Pagination/";
import DownDrop from "./../../components/category";
import {Config, Lang} from "./../../libs/";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import {URL, pureUrl, md5Url} from "./../../libs/Url";
import {fetch, fetch_remove, enable_delete_btn, setArgumentItem, selectAllItem, selectItem} from "../../actions";

const STATUS = {
    NOT_STARTED: {
        value: 3,
        label: '未开始'
    },
    PROGRESS: {
        value: 1,
        label: '进行中'
    },
    FINISHED: {
        value: 2,
        label: '已完成'
    },
};

const Activity = React.createClass({
    getInitialState(){
        return {
            query: {},
        }
    },
    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(fetch({url: URL.ACTIVITY_CATEGORY_FIND}));
        dispatch(fetch({url: URL.ACTIVITY_FIND}));
    },

    search(keyword){
        const {dispatch} = this.props;
        dispatch(fetch({keyword, url: URL.ACTIVITY_FIND}))
    },

    handleSelect(eventKey){
        const {dispatch} = this.props;
        dispatch(fetch({type: eventKey, url: URL.ACTIVITY_FIND}))
    },

    render(){
        const self = this;
        const {dispatch, user} = this.props;
        const argument_ = {};
        const data = self.props[md5Url.ACTIVITY_FIND] || {},
            data_category = self.props[md5Url.ACTIVITY_CATEGORY_FIND] || {};
        (!data.list && (data.list = []));
        (!data_category.list && (data_category.list = []));
        return (
            <Panel>
                <Header>{Lang.menus.ACTIVITIES_LIST}</Header>
                <div className="row table-list-head">
                    <Col xs={6} md={6}>
                        <Link className='btn btn-primary btn-sm' to={Config.MENUS.ACTIVITIES_ADD}>
                            <i className="fa fa-plus"></i> {Lang.ACTIVITY_LIST.create}
                        </Link>
                        <button disabled={(self.props[PAGE_SUBJECT.ACTIVITY].enable_delete_btn == 0 )}
                                onClick={(e)=> {
                                    if (confirm(Lang.ACTIVITY_LIST.delete_confirm)) {

                                        dispatch(fetch_remove({
                                            url: URL.ACTIVITY_DELETE,
                                            target: md5Url.ACTIVITY_FIND,
                                            ids: _.pluck(_.filter(data.list, (item)=> {
                                                return item.checked;
                                            }), 'id').join(',')
                                        }))
                                    }
                                }}
                                className="btn btn-default btn-sm"
                        >{Lang.ACTIVITY_LIST.delete}
                        </button>
                    </Col>
                    <Col xs={6} md={3} mdOffset={3}>
                        <Search submit={this.search}/>
                    </Col>
                </div>
                <Row>
                    <Col xs={12} md={12}>
                        <table
                            className="table table-bordered table-striped general-table">
                            <thead>
                            <tr>
                                <th style={{width: '50px'}}>
                                    <input
                                        type="checkbox"
                                        onClick={(e)=> {
                                            const self = this;
                                            dispatch(selectAllItem(md5Url.ACTIVITY_FIND, e.target.checked));
                                            dispatch(enable_delete_btn(PAGE_SUBJECT.ACTIVITY, {
                                                num: (e.target.checked ? data.list.length : 0),
                                                all: true
                                            }));
                                        }}/>
                                </th>
                                <th style={{width: '60px'}}>NO.</th>
                                <th>{Lang.ACTIVITY_LIST.header.title}</th>
                                <th>
                                    <DownDrop
                                        label={(!argument_ || _.isEmpty(argument_)) ? Lang.ACTIVITY_LIST.header.category : argument_.name}>
                                        {data_category.list.map((item, index)=> {
                                            return <li key={index}>
                                                <a href="javascript:void(0);"
                                                   onClick={()=> {
                                                       dispatch(setArgumentItem(PAGE_SUBJECT.ACTIVITY, item));
                                                       dispatch(fetch({
                                                           url: URL.ACTIVITY_FIND,
                                                           type: item.type
                                                       }))
                                                   }}>{item.name}</a>
                                            </li>
                                        })}
                                    </DownDrop>
                                </th>
                                <th>
                                    <DownDrop
                                        label={(!argument_ || _.isEmpty(argument_)) ? Lang.ACTIVITY_LIST.header.status : argument_.value}>
                                        {
                                            Object.keys(STATUS).map((key, index)=> {
                                                return <li key={index}>
                                                    <a href="javascript:void(0);" onClick={()=> {
                                                        dispatch(setArgumentItem(PAGE_SUBJECT.ACTIVITY, STATUS[key]));
                                                        dispatch(fetch({
                                                            url: URL.ACTIVITY_FIND,
                                                            state: STATUS[key].value
                                                        }))
                                                    }}>{STATUS[key].label}</a>
                                                </li>
                                            })
                                        }
                                    </DownDrop>

                                </th>
                                <th>{Lang.ACTIVITY_LIST.header.time}</th>
                                <th style={{width: '120px'}}>{Lang.ACTIVITY_LIST.header.oper}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                data.list.map((item, index)=> {
                                        item.index = index;
                                        item.isOwn = (item.publisher == user.user.userid);
                                        return <tr key={index}>
                                            <td>
                                                <input type="checkbox" checked={(item.checked ? 'checked' : '')}
                                                       onClick={(e)=> {
                                                           dispatch(selectItem(md5Url.ACTIVITY_FIND, {
                                                               index: index,
                                                               checked: e.target.checked
                                                           }));
                                                           dispatch(enable_delete_btn(PAGE_SUBJECT.ACTIVITY, {num: (e.target.checked ? 1 : -1)}));
                                                       }
                                                       }/>
                                            </td>
                                            <td className="hidden-phone">{index + 1}</td>
                                            <td>
                                                <Link to={
                                                    Config.MENUS_ABSOLUTE.ACTIVITIES_DETAIL.replace(':id', item.id)
                                                }>{item.name}</Link>
                                            </td>
                                            <td>{item.classify && item.classify.name}</td>
                                            <td>
                                                {(STATUS.FINISHED.value == item.state) && STATUS.FINISHED.label}
                                                {(STATUS.PROGRESS.value == item.state) && STATUS.PROGRESS.label}
                                                {(STATUS.NOT_STARTED.value == item.state) && STATUS.NOT_STARTED.label}
                                            </td>
                                            <td>{Moment(item.intime).format('YYYY-MM-DD HH:mm:SS')}</td>
                                            <td>
                                                <Link to={
                                                    Config.MENUS_ABSOLUTE.ACTIVITIES_DETAIL.replace(':id', item.id)
                                                } className="btn btn-default btn-xs">
                                                    <i className="fa fa-search-plus"></i>
                                                </Link>
                                                {
                                                    item.isOwn ? <Link
                                                        to={Config.MENUS_ABSOLUTE.ACTIVITIES_UPDATE.replace(':id', item.id) }
                                                        className="btn btn-default btn-xs">
                                                        <i className="fa fa-pencil"></i>
                                                    </Link> : ''
                                                }

                                                {
                                                    item.isOwn ? <button
                                                        className="btn btn-default btn-xs"
                                                        onClick={
                                                            ()=> {
                                                                if (confirm(Lang.ACTIVITY_LIST.delete_confirm)) {
                                                                    dispatch(fetch_remove({
                                                                        url: URL.ACTIVITY_DELETE,
                                                                        target: md5Url.ACTIVITY_FIND,
                                                                        ids: item.id,
                                                                        index: index
                                                                    }));
                                                                    if (item.checked) {
                                                                        dispatch(enable_delete_btn(SUBJECT.ACTIVITY, {num: -1}))
                                                                    }
                                                                }
                                                            }
                                                        }
                                                        type="button">
                                                        <i className="fa fa-times"></i>
                                                    </button> : ''
                                                }
                                            </td>
                                        </tr>
                                    }
                                )
                            }
                            </tbody>
                        </table>
                        {
                            data.list.length ? '' : <NoData />
                        }
                        {
                            (data.list.length ? <Pagination
                                onselect={(num)=> {
                                    dispatch(fetch({
                                        url: URL.ACTIVITY_FIND,
                                        currentPage: num
                                    }))
                                }}
                                page={data.page || 1}
                                pages={data.pages || 15}
                                onChange={(limit)=> {
                                    console.log(limit);
                                }}
                                total={data}
                            /> : '' )
                        }

                    </Col>
                </Row >
            </Panel>
        )
    }
});
function select(state) {
    return {
        [md5Url.ACTIVITY_FIND]: state.fetchBySubject[md5Url.ACTIVITY_FIND],
        [PAGE_SUBJECT.ACTIVITY]: state.pageBySubject[PAGE_SUBJECT.ACTIVITY],
        [md5Url.ACTIVITY_CATEGORY_FIND]: state.fetchBySubject[md5Url.ACTIVITY_CATEGORY_FIND],
        user: state.user
    }
}
export default connect(select)(Activity)
